<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>倒计时</title>
    <link rel="stylesheet" href="../common/style/reset.css" />
    <style>
      :root {
        --circle-width: 10%;
        --font-size: 10vw;
      }


      .view{
        width: 100%;
        height: 100%;
        padding: var(--circle-width);
        background-color: #000;
      }

      .progress-container {
        position: relative;
        width: 100%;
        height: 100%;
      }

      .circle {
        transition: all 0.3s linear;
        --progress: 0%;
        --progress-not-full: 0%;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background: conic-gradient(
          rgba(255, 255, 255, 0.8) 0%,
          rgba(255, 255, 255, 0.8) var(--progress) 0%,
          rgb(48, 47, 47) var(--progress-not-full) 0%
        );
      }

      .circle::before {
        content: "";
        position: absolute;
        top: var(--circle-width);
        left: var(--circle-width);
        right: var(--circle-width);
        bottom: var(--circle-width);
        background: #000;
        border-radius: 50%;
        z-index: 1;
      }

      .progress-box {
        position: absolute;
        width: 100%;
        height: 100%;
        padding: var(--circle-width);
        top: 0;
        left: 0;
        font-size: var(--font-size);
        z-index: 2;
        color: #fff;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
      }

      .input-box{
        display: flex;
        justify-content: center;
      }

      .progress-box input {
        background-color: transparent;
        width: 20%;
        border: none;
        outline: none;
        color: #fff;
        text-align: center;
        font-size: var(--font-size);
      }

      .btn-box{
        display: flex;
        width: 100%;
        padding: 0 15%;
      }

      /* .action-start */

      .btn-box .btn{
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .btn-left{
        width: 0;
        overflow: hidden;
        transition: all 0.3s linear;
      }

      .btn-right{
        width: 100%;
        transition: all 0.3s linear;
      }

      .icon-pause{
        display: none;
      }
      
      .play-start .icon-play{
        display: none;
      }

      .play-start .icon-pause{
        display: flex;
      }

      .action-start .btn-left,
      .action-start .btn-right{
        width: 50%;
      }

      .progress-remark{
        width: 100%;
        display: flex;
        align-items: center;
      }

      .progress-remark input {
        left: 0;
        top: 0;
        width: 100%;
        text-align: center;
        font-size: 5.5vw;
        padding: 0 10px;
        color: #ffffffb7;
      }

      .carousel-box{
        display: none;
        position: relative;
        width: 100%;
        height: calc(6vw + 4px);
        overflow: hidden;
      }

      .carousel-box div{
        position: absolute;
        font-size: 5.5vw;
        white-space: nowrap;
        padding: 0;
        margin: 0;
      } 
    </style>
  </head>
  <body>
    <div class="view">
      <div class="progress-container">
        <div class="circle" id="progress-circle"></div>
        <div class="progress-box">
          <div class="input-box">
            <input class="hour" type="number" max="23" maxlength="2" value="00" />:
            <input class="point" type="number" max="59" maxlength="2" value="00" />:
            <input class="second" type="number" max="59" maxlength="2" value="00" />
          </div>
          <div class="progress-remark">
            <input type="text" placeholder="请输入备注..." />
            <div class="carousel-box">
              <div></div>
              <div></div>
            </div>
          </div>
          <div class="btn-box">
            <div class="btn-left btn">
              <icon-svg class="icon-stop" name="stop"></icon-svg>
            </div>
            <div class="btn-right btn">
              <icon-svg class="icon-play" name="play"></icon-svg>
              <icon-svg class="icon-pause" name="pause"></icon-svg>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
  <script type="module" src="../common/js/setting.js"></script>
  <script type="module" src="../common/js/menu.js"></script>
  <script type="module" src="../common/js/move.js"></script>
  <script type="module" src="../common/js/counter.js"></script>
  <script type="module">
    import IconSvg from '../components/IconSvg/IconSvg.js'
    customElements.define("icon-svg", IconSvg);

    let playState = false, actionState = false, timing,firstDate,data = {hour: '00', point: '00', second: '00', remark: ''},interval = 60;

    const hourEl = document.querySelector(".hour");
    const pointEl = document.querySelector(".point");
    const secondEl = document.querySelector(".second");
    const iconStopEl = document.querySelector(".icon-stop");
    const iconPauseEl = document.querySelector(".icon-pause");
    const iconPlayEl = document.querySelector(".icon-play");
    const btnBoxEl = document.querySelector(".btn-box");
    // const btnLeftEl = document.querySelector(".btn-left");
    const btnRightEl = document.querySelector(".btn-right");
    const progressRemark = document.querySelector(".progress-remark");
    const remarkEl = document.querySelector(".progress-remark input");
    const carouselBox = document.querySelector(".carousel-box");
    const [carousel1, carousel2] = document.querySelectorAll(".carousel-box div");

    if(window.ipcRenderer){
      window.ipcRenderer.on('init', (event, res)=>{
        data = res || data;
        hourEl.value = data.hour;
        pointEl.value = data.point;
        secondEl.value = data.second;
        remarkEl.value = data.remark;
      })
    }
    

    function setProgress(percent) {
      const circle = document.getElementById("progress-circle");
      // -+ 0.1 解决抗锯齿问题
      if(percent){
        circle.style.setProperty("--progress", `${percent - 0.1}%`);
        circle.style.setProperty("--progress-not-full", `${percent + 0.1}%`);
      }else{
        circle.style.setProperty("--progress", `${percent}%`);
        circle.style.setProperty("--progress-not-full", `${percent}%`);
      }
    }

    const filterNum = (e, num) => {
      const value = e.target.value;
      if (value > num) {
        e.target.value = num;
      }
      if (value < 0) {
        e.target.value = 0;
      }

      if (value.length > 2) {
        e.target.value = value.slice(0, 2);
      }
    };

    const change = (e, type) => {
      let value = e.target.value;
      if (value.length === 1) {
        value = `0${value}`;
        e.target.value = value;
      }
      if (!value) {
        value = `00`;
        e.target.value = value;
      }
      data[type] = value;
    };

    // 时 分 秒
    hourEl.oninput = (e) => filterNum(e, 23);
    pointEl.oninput = (e) => filterNum(e, 59);
    secondEl.oninput = (e) => filterNum(e, 59);
    hourEl.onchange = (e) => change(e, "hour");
    pointEl.onchange = (e) => change(e, "point");
    secondEl.onchange = (e) => change(e, "second");

    remarkEl.onchange = () => {
      let remark = remarkEl.value;
      data.remark = remark;
    }

    const setDate = () => {
      let timingHourel = parseInt(hourEl.value);
      let timingPoint = parseInt(pointEl.value);
      let timingSecond = parseInt(secondEl.value);
      let timingDate = timingHourel * 3600 * 1000 + timingPoint * 60 * 1000 + timingSecond * 1000;
      return timingDate;
    }

    const hintSound = () => {
      let audio = new Audio('../common/assets/sound/apple.mp3');
      audio.volume = 1;
      audio.play()
      audio.onended = () => {
        audio.remove();
      }
    }

    const dateHandle = (recordDate, totalDate) => {
     
      const date = new Date().getTime();
      let pastDate = date - recordDate
      let currentDate = totalDate - pastDate;

      let currentHourel = parseInt(currentDate / 3600 / 1000);
      let currentPoint = parseInt((currentDate - currentHourel * 3600 * 1000) / 60 / 1000);
      let currentSecond = parseInt((currentDate - currentHourel * 3600 * 1000 - currentPoint * 60 * 1000) / 1000);
      if (currentHourel < 0) {
        currentHourel = 0;
      }
      if (currentPoint < 0) {
        currentPoint = 0;
      }
      if (currentSecond < 0) {
        currentSecond = 0;
      }
      
      let percentage = currentHourel * 3600 + currentPoint * 60 + currentSecond
      let totalsp = firstDate / 1000 / 100;
      setProgress(percentage / totalsp);

      hourEl.value = currentHourel < 10 ? `0${currentHourel}` : currentHourel;
      pointEl.value = currentPoint < 10 ? `0${currentPoint}` : currentPoint;
      secondEl.value = currentSecond < 10 ? `0${currentSecond}` : currentSecond;
      if (currentHourel == 0 && currentPoint == 0 && currentSecond == 0) {
        utools.showNotification(data.remark + '已结束！');
        hintSound()
        playStop()
      }
    };

  

    const playStart = () => {
      if (playState) return;
      if(window.sendSaveData)window.sendSaveData(data);
      let totalDate = setDate();
      if(totalDate == 0){
        playState = false;
        return
      }
      
      let recordDate = new Date().getTime();
      if(!actionState){
        firstDate = totalDate;
      }
      initScroll();
      playState = true;
      actionState = true;
      timing = setInterval(() => {
          dateHandle(recordDate, totalDate);
      }, 150);
      btnBoxEl.classList.add("action-start");
      btnRightEl.classList.add("play-start");
      hourEl.disabled = true;
      pointEl.disabled = true;
      secondEl.disabled = true;
      remarkEl.disabled = true;
    }

    const playPause = () => {
      playState = false;
      clearInterval(timing);
      btnRightEl.classList.remove("play-start");
    }

    const playStop = () => {
      playState = false;
      actionState = false;
      clearInterval(timing);
      hourEl.value = "00";
      pointEl.value = "00";
      secondEl.value = "00";
      setProgress(0)
      btnBoxEl.classList.remove("action-start");
      btnRightEl.classList.remove("play-start");
      endScroll();
      hourEl.disabled = false;
      pointEl.disabled = false;
      secondEl.disabled = false;
      remarkEl.disabled = false;
    }


    iconPlayEl.onclick = window.triggerHandle(playStart);

    iconPauseEl.onclick = window.triggerHandle(playPause);

    iconStopEl.onclick = window.triggerHandle(playStop);

    document.onkeydown = function (e) {
      if (e.keyCode == 13) {
        playStart();
      }
    };

    const initScroll = () => {
      if(!playState && !actionState){
        let multiple = document.documentElement.clientWidth / 100 * 5.5;
        let w = progressRemark.clientWidth;
        let cw = remarkEl.value.length * multiple;
        if(cw < w)return;
        remarkEl.style.display = 'none';
        carouselBox.style.display = 'block';
        carousel1.innerText = remarkEl.value;
        carousel2.innerText = remarkEl.value;
        carousel1.style.left = 0;
        carousel2.style.left = carousel1.clientWidth + interval + 'px';
      
      }
      scrollText();
    }

    const endScroll = () => {
      carouselBox.style.display = 'none';
      remarkEl.style.display = 'block';
    }

    const scrollText = () => {
      let t;
      let an = (s) => {
        if(!playState && !actionState)return endScroll();
        if(!playState)return;
        if(!t)t = s;
        let carousel1Style = window.getComputedStyle(carousel1);
        let carousel2Style = window.getComputedStyle(carousel2);
        let carousel1Left = parseInt(carousel1Style.getPropertyValue('left').slice(0,-2));
        let carousel2Left = parseInt(carousel2Style.getPropertyValue('left').slice(0,-2));
        
        if(s - t > 33){
          carousel1.style.left = carousel1Left - 1 + 'px'; 
          carousel2.style.left = carousel2Left - 1 + 'px';
          t = s;
        }

        if(carousel1Left < -carousel1.clientWidth) carousel1.style.left = carousel2Left + carousel2.clientWidth + interval + 'px';
        if(carousel2Left < -carousel2.clientWidth) carousel2.style.left = carousel1Left + carousel1.clientWidth + interval + 'px';
        
        requestAnimationFrame(an);
      }

      
      requestAnimationFrame(an);
    }

    


    window.getData = () => data;
  </script>
</html>
